<template>
  <view class="community-container">
    
    <!-- 标签筛选 -->
    <tag-filter 
      v-model="currentTag" 
      :tags="tagList" 
      @change="handleTagChange"
    />
    
    <!-- 下拉刷新和上拉加载 -->
    <scroll-view 
      class="post-list-scroll" 
      scroll-y 
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="refresh"
    >
      <!-- 加载中提示 -->
      <view class="loading-container" v-if="loading && !refreshing && postList.length === 0">
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 空状态提示 -->
      <view class="empty-container" v-else-if="!loading && postList.length === 0">
        <image class="empty-image" src="/static/images/empty.png" mode="aspectFit" />
        <text class="empty-text">{{ emptyText }}</text>
        <button class="refresh-button" @click="refresh">刷新</button>
      </view>
      
      <!-- 动态列表 -->
      <view class="post-list" v-else>
        <post-item 
          v-for="post in postList" 
          :key="post.id" 
          :post="post"
          @delete="handlePostDelete"
          @like="handlePostLike"
        />
        
        <!-- 底部加载状态 -->
        <view class="list-footer" v-if="postList.length > 0">
          <text v-if="loading">加载中...</text>
          <text v-else-if="!hasMore">没有更多了</text>
          <text v-else @click="loadMore">点击加载更多</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 悬浮发布按钮 -->
    <view class="float-button" @click="goToPost">
      <text class="iconfont icon-add">+</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onActivated } from 'vue';
import { useStore } from 'vuex';
import TagFilter from '../../components/community/TagFilter.vue';
import PostItem from '../../components/community/PostItem.vue';

const store = useStore();

// 标签列表
const tagList = computed(() => store.getters['community/tagList']);

// 当前选中的标签
const currentTag = ref('all');

// 是否只看关注的用户
const followedOnly = ref(false);

// 动态列表
const postList = computed(() => store.getters['community/postList']);

// 加载状态
const loading = computed(() => store.getters['community/loading'].postList);

// 是否有更多数据
const hasMore = computed(() => store.getters['community/pagination'].hasMore);

// 是否正在刷新
const refreshing = ref(false);

// 空状态提示文本
const emptyText = computed(() => {
  if (followedOnly.value) {
    return '暂无关注用户的动态，去关注更多用户吧';
  }
  
  if (currentTag.value !== 'all') {
    const tag = tagList.value.find(t => t.id === currentTag.value);
    return `暂无${tag ? tag.name : ''}动态，去发布一条吧`;
  }
  
  return '暂无动态，去发布一条吧';
});

// 生命周期钩子
onMounted(async () => {
  // 获取标签列表
  await store.dispatch('community/fetchTagList');
  
  // 获取动态列表
  await fetchPosts();
});

// 页面激活时刷新数据
onActivated(() => {
  refresh();
});

// 获取动态列表
const fetchPosts = async (refresh = false) => {
  await store.dispatch('community/fetchPostList', {
    tag: currentTag.value,
    followed: followedOnly.value,
    refresh
  });
};

// 刷新
const refresh = async () => {
  refreshing.value = true;
  await fetchPosts(true);
  refreshing.value = false;
};

// 加载更多
const loadMore = async () => {
  if (loading.value || !hasMore.value) return;
  await fetchPosts();
};

// 切换标签
const handleTagChange = async (tag) => {
  currentTag.value = tag;
  await fetchPosts(true);
};

// 切换是否只看关注的用户
const toggleFollowedOnly = async () => {
  followedOnly.value = !followedOnly.value;
  await fetchPosts(true);
};

// 处理动态删除
const handlePostDelete = async (postId) => {
  // 刷新动态列表
  await fetchPosts(true);
};

// 处理动态点赞
const handlePostLike = async (data) => {
  // 无需额外处理，store中已更新状态
};

// 跳转到发布页面
const goToPost = () => {
  uni.navigateTo({
    url: '/pages/community/post'
  });
};
</script>

<style lang="scss" scoped>
.community-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
  
  /* 顶部操作区已移除 */
  
  .post-list-scroll {
    flex: 1;
    height: 0;
    
    .loading-container, .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 0;
      
      .loading-text, .empty-text {
        font-size: 15px;
        color: #999999;
        margin: 12px 0;
        line-height: 1.5;
      }
      
      .empty-image {
        width: 140px;
        height: 140px;
        margin-bottom: 20px;
        opacity: 0.8;
      }
      
      .refresh-button {
        margin-top: 20px;
        font-size: 15px;
        color: #ffffff;
        background-color: #007aff;
        border-radius: 24px;
        padding: 8px 24px;
        box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2);
        
        &:active {
          transform: scale(0.98);
          box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2);
        }
      }
    }
    
    .post-list {
      padding: 0;
      
      .list-footer {
        text-align: center;
        padding: 20px 0;
        font-size: 14px;
        color: #999999;
        background-color: #ffffff;
        margin: 0 12px 12px;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        
        &:active {
          background-color: #f5f5f5;
        }
      }
    }
  }
  
  .float-button {
    position: fixed;
    right: 24px;
    bottom: 100px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
    z-index: 99;
    
    .iconfont {
      font-size: 28px;
      color: #ffffff;
      font-weight: bold;
    }
    
    &:active {
      transform: scale(0.95);
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
    }
  }
}
</style>
